<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="../../__/import.js"></script>
<title>编辑角色</title>
<style type="text/css">
.x-tree-wapper {
	height: 230px;
	border-radius: 4px;
	border: 1px solid #DCDFE6;
	padding: 5px 5px;
	overflow-y: scroll;
}

.x-tree-node {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 8px;
}
</style>
</head>
<body>
	<div id="vm" v-cloak>
		<form is="el-form" style="width: 500px;" label-width="80px" size="mini">
			<div is="el-form-item" label="编码" :required="true">
				<input is="el-input" v-model.trim="form.code" placeholder="角色编码" autocomplete="off" maxlength="20" show-word-limit />
			</div>
			<div is="el-form-item" label="名称" :required="true">
				<input is="el-input" v-model.trim="form.name" placeholder="角色名称" autocomplete="off" maxlength="20" show-word-limit />
			</div>
			<div is="el-form-item" label="备注">
				<textarea is="el-input" type="textarea" v-model.trim="form.remark" autocomplete="off" maxlength="200" show-word-limit></textarea>
			</div>
			<div is="el-form-item" label="功能授权">
				<div class="x-tree-wapper">
					<div is="el-tree" :data="permission.data" ref="permissionTree" show-checkbox :props="{label:'name',children:'children'}" default-expand-all node-key="id" :default-checked-keys="form.permissionIds" @check-change="changePermission">
						<div class="x-tree-node" slot-scope="{ node, data }">
							<span>{{ node.label }}</span> <span>{{permissionTypeName(data.type)}}</span>
						</div>
					</div>
				</div>
			</div>
			<div is="el-form-item" align="center">
				<button is="el-button" type="success" @click="confirm('form')">确定</button>
				<button is="el-button" @click="cancel">取消</button>
			</div>
			{{form.permissionIds}}
		</form>
	</div>
	<script>
		new Vue({
			el : '#vm',
			data : {
				form : {
					id : '',
					code : '',
					name : '',
					remark : '',
					permissionIds : []
				},
				permission : {
					data : []
				}
			},
			created : function() {
				__.$vm = this;
			},
			mounted : function() {
				var vm = this;
				var search = __.decodeUrlParams();

				__.mask('permission');
				__.api('POST', '/rest/permission/getPermissionTree', {}, function(result) {
					__.unmask('permission');
					if (__.err(result)) {
						__.message({
							message : result.message,
							type : 'warning'
						});
						return;
					}
					vm.permission.data = result.data || [];
				});

				if (__.isEmpty(search.id)) {
					return;
				}
				__.mask('role');
				__.api('POST', '/rest/role/getById', {
					id : search.id
				}, function(result) {
					__.unmask('role');
					if (__.err(result)) {
						__.message({
							message : result.message,
							type : 'warning'
						});
						return;
					}
					vm.form = result.data;
				});
			},
			methods : {
				changePermission : function() {
					var vm = this;
					vm.form.permissionIds = vm.$refs.permissionTree.getCheckedKeys(true);
				},
				permissionTypeName : function(type) {
					switch (type | 0) {
					case 1:
						return '模块';
					case 2:
						return '目录';
					case 3:
						return '菜单';
					case 4:
						return '按钮';
					default:
						return '-';
					}
				},
				confirm : function(formName) {
					var vm = this;
					var params = {}, form = vm.form;
					params.id = form.id;
					params.name = __.trim(form.name);
					params.code = __.trim(form.code);
					params.remark = __.trim(form.remark);
					params.permissionIds = form.permissionIds
					if (__.isEmpty(params.code)) {
						__.message({
							message : '请输入编码！',
							type : 'warning'
						});
						return;
					}
					if (__.isEmpty(params.name)) {
						__.message({
							message : '请输入名称！',
							type : 'warning'
						});
						return;
					}
					var path = __.isEmpty(params.id) ? '/rest/role/save' : '/rest/role/update';
					__.api('POST', path, params, function(result) {
						if (__.err(result)) {
							__.message({
								message : result.message,
								type : 'warning'
							});
							return;
						}
						__.dialog.close();
					});
				},
				cancel : function() {
					__.dialog.close();
				}
			}
		})
	</script>
</body>
</html>